<template>
  <div class="article-list">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="enLoad"
    >
      <!-- <van-cell
        v-for="(article, index) in list"
        :key="index"
        :title="article.ar.name"
      /> -->
      <van-cell-group>
        <van-cell  @click="skip(article.id)" v-for="(article, index) in list2" :key="index">
          <template #title>
            <span class="custom-title">{{ article.name }}</span>
            <span class="custom-title xiao">{{ article.ar[0].name }}</span>
          </template>
          <template #right-icon>
            <van-icon name="play-circle-o" />
            <span><van-icon name="ellipsis"/></span>
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
import { Mylist } from '@/api/Mylike'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      list: [],
      list2: [],
      loading: false,
      finished: false,
      type: 0
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'cookie'])
  },
  created () {
    this.uid = this.userInfo.userId
    this.enLoad()
  },
  mounted () {},
  methods: {
    async enLoad () {
      // console.log(this.uid)
      // const { data } = await Mylist({ uid: this.uid, type: this.type })

      const { allData } = await Mylist({
        uid: this.uid,
        cookie: this.cookie,
        type: this.type
      })
      // this.list = allData
      this.list.push(...allData)
      for (let i = 0; i < this.list.length; i++) {
        this.list2.push(this.list[i].song)
      }
      console.log(this.list2)
      this.loading = false
      if (allData.length) {
        this.finished = true
      }
    },
    skip (uid) {
      this.$router.push(`/play${uid}`)
    }
  }
}
</script>

<style scoped lang="less">
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}
/deep/.xiao {
  font-size: 12px !important;
  color: #999;
}
.search-icon {
  font-size: 16px;
  line-height: inherit;
}
/deep/ .van-cell {
  border: 'none';
}
/deep/ .van-icon-play-circle-o {
  margin-right: 20px;
  font-size: 40px;
}
/deep/ .van-icon-ellipsis {
  font-size: 40px;
}
/deep/ .van-cell {
  display: -webkit-box;
  /* -webkit-box-orient: vertical; /
/! autoprefixer: ignore next */
  // -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  // overflow: hidden;
}
/deep/ .van-cell__title {
  span {
    font-size: 30px;
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
  }
}
// html {
//   -webkit-tap-highlight-color: transparent;
// }
</style>
